<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" href="<c:url value='/resources/css/style.css'/>" type="text/css">
	<title>Compare</title>
	<style>
		.column {
			float: left;
			width: 429px;
			margin: 0;
			padding: 20px;
		}
		form {
			width: 429px;
			border: none;
			padding: 0;
			margin: 0;
		}
		form textarea {
			width: 429px;
		}
		.comments {
			margin: 0;
			padding: 0;
		}
		.comment {
			list-style-type: none;
			padding: 10px;
			margin: 5px 0;
			background: white;
		}
		.comment_details {
			float: right;
			font-size: 0.7em;
			padding: 0 5px;
		}
	</style>
</head>
<body>
	<div class='top'>
		<ul>
			<li><a href="<c:url value='/'/>">Home</a></li>
			<li><a href="<c:url value='/compare.html'/>">Compare</a></li>
			<li style='float:right;'><a href="<c:url value='/j_spring_security_logout'/>">Log Out</a></li>
			<li style='float:right;'><a href="<c:url value='/logged.html'/>">Profile[${userId}]</a></li>
		</ul>
		<br style='clear: both;'>
	</div>
	<div class='center'>
		<div class='column'>
			<img src="/Fotka/imageController/${foto_0.id}.jpg" />
			<form name='f0' action="<c:url value='/add_comment.html' />" method='POST'>
				<textarea name="comment"></textarea>
				<input type="hidden" name="fotoId" value="${foto_0.id}" />
				<input name="submit" type="submit" value="submit" />
			</form>
			<c:if test="${not empty foto_0.comments}">
				<ul class='comments'>
					<c:forEach items="${foto_0.comments}" var="comment">
						<li class='comment'>
							<div>${comment.comment}</div>
							<div class='comment_details'>${comment.date}</div>
							<div class='comment_details'>${comment.fotkaUser.firstName} ${comment.fotkaUser.lastName}</div>
							<br style='clear: both;'>
						</li>
					</c:forEach>
				</ul>
			</c:if>
		</div>
		<div class='column'>
			<img src="/Fotka/imageController/${foto_1.id}.jpg" />
			<form name='f1' action="<c:url value='/add_comment.html' />" method='POST'>
				<textarea name="comment"></textarea>
				<input type="hidden" name="fotoId" value="${foto_1.id}" />
				<input name="submit" type="submit" value="submit" />
			</form>
			<c:if test="${not empty foto_1.comments}">
				<ul class='comments'>
					<c:forEach items="${foto_1.comments}" var="comment">
						<li class='comment'>
							<div>${comment.comment}</div>
							<div class='comment_details'>${comment.date}</div>
							<div class='comment_details'>${comment.fotkaUser.firstName} ${comment.fotkaUser.lastName}</div>
							<br style='clear: both;'>
						</li>
					</c:forEach>
				</ul>
			</c:if>
		</div>
		<br style='clear: both;'>
	</div>
</body>
</html>